<template>
  <div>
    <a-card :bordered="false">
      <f-search-form @searchHandler="searchHandler">
        <f-search-form-item label="商品名称" name="productName"/>
        <f-search-form-item label="商品分类" name="categoryIds" type="cascader" :data="api.category.list"></f-search-form-item>
        <f-search-form-item label="商品状态" name="onLineState" type="select" :data="onLineState"></f-search-form-item>
        <f-search-form-item label="创建日期" name="rangeDate" type="range" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" size="default" rowKey="productId" handler="platformProductHandler" :expandedRowKeys= "expandedRowKeys" :scroll="scroll" :columns="columns" :operator="operator" :params="queryParam" :api="api.product" @onExpand="onExpand" @onSuccess="onSuccess">
        <span slot="productName" slot-scope="text, record, index">
          <f-elipsis :text="record.productName"></f-elipsis>
        </span>
        <span slot="categoryName" slot-scope="text, record, index">
          <a-tag color="pink">{{record.categoryName}}</a-tag>
        </span>
        <span slot="coverImage" slot-scope="text, record, index">
           <f-images :value="record.coverImage"></f-images>
        </span>
        <span slot="saleCount" slot-scope="text, record, index">
            <p style="width: 100px"><a-tag color="green">销量：<span>{{record.saleCount}}</span></a-tag><a-tag color="pink" style="margin-top: 3px">评分：<span>{{record.productScore}}</span></a-tag></p>
        </span>
        <span slot="oldPrice" slot-scope="text, record, index">
            <p style="width: 100px"><a-tag color="red">原价：<span>{{record.oldPrice}}</span></a-tag><a-tag color="red" style="margin-top: 3px">现价：<span>{{record.productPrice}}</span></a-tag></p>
        </span>
        <span slot="status" slot-scope="text, record, index">

          <a-select placeholder="请选择" @change="(value)=> setStatus(value,record)" style="width: 100px;" :value="getText(text)" optionLabelProp="label">
            <a-select-option value="1">已上架</a-select-option>
            <a-select-option value="2">已下架</a-select-option>
            <a-select-option value="3">违规下架</a-select-option>
          </a-select>
        </span>

        <span slot="recommend" slot-scope="text, record, index">
          <a-switch v-model="record.recommend==1" checkedChildren="是" unCheckedChildren="否" @change="(checked) => setRecommend(checked,record)"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="productEdit(record)">编辑</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="$refs.table.remove(record.productId)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <span slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <div class="single-item" v-for="sku in skuList">
            <div class="hold-img"><img v-lazy="getImages(sku)" alt="" width="80" height="80" class="radius-img"></div>
              <p class="spec-title" :title="sku.title">{{sku.title}}</p>
              <div class="row-term">
                  <p><span class="row-title">编号：</span><span class="price-value">{{sku.productNo}}</span></p>
                  <p><span class="row-title">价格：</span><span class="price-value">￥{{sku.price}}</span></p>
                  <p><span class="row-title">库存：</span><span class="stock-value">{{sku.num}}</span></p>
              </div>
          </div>
        </span>
      </f-table>
      <product-drawer ref="modal"></product-drawer>
    </a-card>
  </div>
</template>

<script>
  import ProductDrawer from './product_drawer'

  export default {
    name: 'TableList',
    components: { ProductDrawer },
    data() {
      return {
        //列表初始化查询参数
        queryParam: {},
        scroll: { x: 1590 },
        expandedRowKeys: [],
        firstCategory: [],
        enableProductParams:true,
        firstLoad: true,
        onLineState: [{ value: '2', label: '已下架' }, { value: '3', label: '违规下架' }],
        skuList: [],
        // 表头
        columns: [
          {
            title: '#',
            align: 'center',
            customRender: (text, record, index) => index + 1
          }, {
            title: '封面图',
            align: 'center',
            width: '100px',
            dataIndex: 'coverImage',
            scopedSlots: { customRender: 'coverImage' }
          },
          {
            title: '店铺名称',
            width: '160px',
            dataIndex: 'shopName'
          },
          {
            title: '商品名称',
            dataIndex: 'productName',
            scopedSlots: { customRender: 'productName' }
          },
          {
            title: '分类',
            align: 'center',
            dataIndex: 'categoryName',
            scopedSlots: { customRender: 'categoryName' }
          },
          {
            title: '销量信息',
            align: 'center',
            width: '100px',
            dataIndex: 'saleCount',
            scopedSlots: { customRender: 'saleCount' }
          },
          {
            title: '价格信息',
            align: 'center',
            width: '100px',
            dataIndex: 'oldPrice',
            scopedSlots: { customRender: 'oldPrice' }
          },
          {
            title: '创建日期',
            align: 'center',
            dataIndex: 'createTime',
            sorter: true
          },
          {
            title: '上架状态',
            dataIndex: 'onLineState',
            sorter: true,
            fixed: 'right',
            align: 'center',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '推荐',
            dataIndex: 'recommend',
            sorter: true,
            fixed: 'right',
            align: 'center',
            scopedSlots: { customRender: 'recommend' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
        //操作按钮
        operator: [
          {
            name: '删除',
            icon: 'delete',
            batch: true,
            handler: function(table) {
              table.remove()
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      getText: function(value) {
        if (value == 1) {
          return '已上架'
        }
        if (value == 2) {
          return '已下架'
        }
        if (value == 3) {
          return '违规下架'
        }
      },
      getImages(sku) {
        let images = sku.images
        if (images != '' && images.indexOf('[{') > -1) {
          let obj = JSON.parse(images)
          if (obj && obj.length > 0) {
            return obj[0].url
          }
        }
        return images
      },
      setStatus(value, record) {
        this.http.post(this, {
          url: this.api.product.setOnLineState,
          data: {
            ids: record.productId,
            onlineState: value
          },
          success(me, data) {
            record.onLineState = data
          }
        })
      },
      setRecommend(check, record) {
        this.http.post(this, {
          url: this.api.product.setRecommend,
          data: {
            ids: record.productId,
            recommend: Number(check)
          },
          success(me, data) {
            record.recommend = data
          }
        })
      },
      onSuccess(data, extra) {
        let recommendEnable = extra.recommendEnable
        this.enableProductParams=extra.enableProductParams
        if (recommendEnable == false && this.firstLoad) {
          if (this.firstLoad) {
            this.columns.splice(8, 1)
            this.firstLoad = false
          }
          this.scroll.x = 1510
        } else {
          this.scroll.x = 1590
        }

      },
      onExpand(expanded, record) {
        this.expandedRowKeys=[];
        if (expanded) {
          this.expandedRowKeys.push(record.productId);
          this.skuList = []
          this.http.get(this, {
            url: this.api.product.getSkuList,
            data: {
              params: {
                productId: record.productId
              }
            },
            success: function(me, data) {
              me.skuList = data
            }
          })
        }
      },
      productEdit(record){
        record.enableProductParams=this.enableProductParams
        this.$refs.modal.handleShow(record)
      }
    },
    created() {

    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">

  .single-item {
    text-align: center;
    float: left;
    margin-right: 8px;
    border: 1px solid #E1E6F0;
    width: 180px;
    height: 180px;
    padding: 10px;
    cursor: pointer;
  }

  .single-item .hold-img {
    padding: 5px;
  }


  .single-item p {
    margin: 0px;
    width: 140px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-item .spec-title {
    margin-top: 5px;

    color: #00A0E9;
  }

  .single-item .row-term p {
    width: 160px;
    text-align: left;
  }

  .product-title {
    display: inline-block;
    text-align: left;
    padding-left: 20px;
  }

  .row-title {
    display: inline-block;
    text-align: center;
    padding-left: 20px;
  }

</style>
